<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 表单搜索框 -->
		<el-form ref="form" :inline="true" style="margin-top: 20px;">
			<span>状态：</span>
			<el-button-group style="margin-left: 10px ;">
				<el-button>全部商品</el-button>
				<el-button>上架中</el-button>
				<el-button>已下架</el-button>
			</el-button-group>
			<el-form-item label="商品名称" style="margin-left: 10px;">
				<el-input v-model="shop.goodsName" placeholder="请输入内容" size="small"
					style="width: 200px;margin-right: 10px;"></el-input>
			</el-form-item>
			<el-form-item label="提交日期">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange" size="small"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" style="margin-left: 10px;"
					@click="querySearchBulkGoodsList">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" style="margin-left: 10px;">添加商品</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格 -->
		<template>
			<el-table :data="shopList" style="width: 100%" border :header-cell-style="{backgroundColor:'#eee'}">
				<el-table-column prop="bulkGoodsId" label="ID">
				</el-table-column>
				<el-table-column prop="bulkGoodsName" label="商品名字">
				</el-table-column>
				<el-table-column prop="goodsOrigin" label="原产地">
				</el-table-column>
				<el-table-column prop="bulkGoodsSalePrice" label="售价">
				</el-table-column>
				<el-table-column prop="bulkGoodsPurchasePrice" label="采购价">
				</el-table-column>
				<el-table-column prop="bulkGoodsInventory" label="总库存">
				</el-table-column>
				<el-table-column prop="goodsRemainingInventory" label="剩余库存">
				</el-table-column>
				<el-table-column prop="salesVolume" label="销量">
				</el-table-column>
				<el-table-column prop="virtualSales" label="虚拟销量">
				</el-table-column>
				<el-table-column prop="buyMinLimit" label="起购数量">
				</el-table-column>
				<el-table-column prop="buyLimit" label="限购数量">
				</el-table-column>
				<el-table-column prop="addTime" label="添加时间">
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-tag type="success" v-show="scope.row.bulkGoodsStatus==1">已上架</el-tag>
						<el-tag type="danger" v-show="scope.row.bulkGoodsStatus==0">已下架</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="buyStartTime" label="定时上架时间">
				</el-table-column>
				<el-table-column prop="buyEndTime" label="定时抢购时间">
				</el-table-column>
				<el-table-column label="操作" width="120px" align="center">
					<template slot-scope="scope">
						<el-link :underline="false" type="primary" style="font-size: 12px;"
							v-show="scope.row.bulkGoodsStatus==0"
							@click="sg(scope.row.bulkGoodsId)">立即上架<br /></el-link>
						<el-link :underline="false" type="primary" style="font-size: 12px;"
							v-show="scope.row.bulkGoodsStatus==1"
							@click="xg(scope.row.bulkGoodsId)">立即下架<br /></el-link>
						<el-link :underline="false" type="primary" style="font-size: 12px;"
							v-show="scope.row.bulkGoodsStatus==1"
							@click="xgsjsj(scope.row.bulkGoodsId)">修改上架时间<br /></el-link>
						<el-link :underline="false" type="primary" style="font-size: 12px;"
							v-show="scope.row.bulkGoodsStatus==1"
							@click="xgsjsj(scope.row.bulkGoodsId)">修改结束时间<br /></el-link>
						<el-link :underline="false" type="primary" style="font-size: 12px;"
							@click="xgxnxl(scope.row.bulkGoodsId)">修改虚拟销量</el-link><br />
						<el-link :underline="false" type="primary" style="font-size: 12px;">修改</el-link>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="shop.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="shop.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 弹出框 -->
		<el-dialog :title="title" :visible.sync="show" width="500px">
			<el-form :model="shopData" >
				<el-form-item label="上架时间" label-width="120px" v-show="title=='自定义上架和抢购结束时间'">
					<div class="block">
					    <el-date-picker
					      v-model="shopData.buyStartTime"
					      type="datetime"
					      placeholder="选择上架时间">
					    </el-date-picker>
					  </div>
				</el-form-item>
				<el-form-item label="抢购结束时间" label-width="120px" v-show="title=='自定义上架和抢购结束时间'">
					<div class="block">
					    <el-date-picker
					      v-model="shopData.buyEndTime"
					      type="datetime"
					      placeholder="选择结束时间">
					    </el-date-picker>
					  </div>
				</el-form-item>
				<el-form-item label="修改上架时间" label-width="120px" v-show="title=='修改上架时间'">
					<div class="block">
					    <el-date-picker
					      v-model="shopData.buyEndTime"
					      type="datetime"
					      placeholder="选择上架时间">
					    </el-date-picker>
					  </div>
				</el-form-item>
				<el-form-item label="修改抢购结束" label-width="120px" v-show="title=='修改结束时间'">
					<div class="block">
					    <el-date-picker
					      v-model="shopData.buyEndTime"
					      type="datetime"
					      placeholder="选择结束时间">
					    </el-date-picker>
					  </div>
				</el-form-item>
				<el-form-item label="修改虚拟销量" label-width="120px" v-show="title=='修改虚拟销量'">
					 <el-input v-model="shopData.virtualSales" ></el-input>
				</el-form-item>
			</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="concel">取 消</el-button>
					<el-button type="primary" @click="sure">确 定</el-button>
				</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				shop: {
					goodsName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5,
				},
				date: '',
				shopList: [],
				total: 0,
				title: '',
				show:false,
				shopData: {
					bulkGoodsId: '',
					bulkGoodsStatus: '',
					buyEndTime: "",
					buyStartTime:'',
					virtualSales:'',
				},
				bulkGoodsId:''
			}
		},
		methods: {
			//取消
			concel(){
				this.shopData={
					bulkGoodsId: '',
					bulkGoodsStatus: '',
					buyEndTime: "",
					buyStartTime:'',
					virtualSales:'',
				}
				this.show=false
				
			},
			//修改虚拟销售
			xgxnxl(id){
				this.title="修改虚拟销量"
				this.show=true
				this.bulkGoodsId=id
			},
			//修改结束时间
			sgjssj(id){
				this.title="修改结束时间"
				this.show=true
				this.bulkGoodsId=id
			},
			//修改上架时间
			xgsjsj(id){
				this.title="修改上架时间"
				this.show=true
				this.bulkGoodsId=id
			},
			//上架
			sg(id){
				this.title="自定义上架和抢购结束时间"
				this.show=true
				this.bulkGoodsId=id
				this.shopData.bulkGoodsStatus=1;
			},
			//确认
			sure() {
				if(this.title=='修改上架时间'){
					this.$http.post('bulkGoods/modifyBulkGoods', {
						bulkGoodsId:this.bulkGoodsId,
						buyStartTime:this.shopData.buyStartTime
						})
						.then(res => {
							console.log(this.shopData.buyStartTime)
							if (res.data.status == 200) {
								this.show=false
								this.querySearchBulkGoodsList()
								this.$message.success('操作成功!')
							}else{
								this.$message.error('服务器接口异常！')
							}
						})
						.catch(error=>{
							this.$message.error('服务器异常！')
						})
				}else if(this.title=='修改结束时间'){
					this.$http.post('bulkGoods/modifyBulkGoods', {
						bulkGoodsId:this.bulkGoodsId,
						buyEndTime:this.shopData.buyEndTime
						})
						.then(res => {
							console.log(res)
							if (res.data.status == 200) {
								this.show=false
								this.querySearchBulkGoodsList()
								this.$message.success('操作成功!')
							}else{
								this.$message.error('服务器接口异常！')
							}
						})
						.catch(error=>{
							this.$message.error('服务器异常！')
						})
				}else if(this.title=='修改虚拟销量'){
					this.$http.post('bulkGoods/modifyBulkGoods', {
						bulkGoodsId:this.bulkGoodsId,
						virtualSales:this.shopData.virtualSales
						})
						.then(res => {
							console.log(res)
							if (res.data.status == 200) {
								this.show=false
								this.querySearchBulkGoodsList()
								this.$message.success('操作成功!')
							}else{
								this.$message.error('服务器接口异常！')
							}
						})
						.catch(error=>{
							this.$message.error('服务器异常！')
						})
				}else if(this.title=='自定义上架和抢购结束时间'){
					this.$http.post('bulkGoods/modifyBulkGoods', {
						bulkGoodsId:this.bulkGoodsId,
						buyStartTime:this.shopData.buyStartTime,
						buyEndTime:this.shopData.buyEndTime
						})
						.then(res => {
							console.log(res)
							if (res.data.status == 200) {
								this.show=false
								this.querySearchBulkGoodsList()
								this.$message.success('操作成功!')
							}else{
								this.$message.error('服务器接口异常！')
							}
						})
						.catch(error=>{
							this.$message.error('服务器异常！')
						})
				}
			},
			//下架
			xg(id) {
				this.$http.post('bulkGoods/modifyBulkGoods', {
						bulkGoodsId: id,
						bulkGoodsStatus: 0,
						buyEndTime: "",
						buyStartTime: "",
					})
					.then(res => {
						if (res.data.status == 200) {
							this.querySearchBulkGoodsList()
							this.$message.success('下架成功!')
						}
					})
			},
			querySearchBulkGoodsList() {
				this.$http.get('bulkGoods/querySearchBulkGoodsList', {
						params: this.shop
					})
					.then(res => {
						if (res.data.status == 200) {
							this.shopList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('服务器接口异常！')
						}
					})
					.catch(error => {
						this.$message.error('服务器接异常！')
					})
			},

			handleSizeChange(val) {
				this.shop.pageSize = val;
				this.shop.pageNum = 1
				this.querySearchShopGoodsList()
			},

			handleCurrentChange(val) {
				this.shop.pageNum = val;
				this.querySearchShopGoodsList()
			}
		},
		mounted() {
			this.querySearchBulkGoodsList()
		}
	}
</script>

<style>
</style>